<template>
    <div>
        <div class="page-title">查询信息</div>
        <router-link to="/addGuideType">
        </router-link>

      <el-form ref="form" :model="form" label-width="80px" :inline="true" class="demo-form-inline">
        <el-form-item label="付款时间">
          <el-col :span="3">
            <el-date-picker
                v-model="form.fksj"
                type="date"
                placeholder="选择日期">
            </el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="供货公司">
          <el-select v-model="form.ghgs" placeholder="请选择供货公司">
            <el-option label="请选择" value="0"></el-option>
            <el-option
              v-for="item in supplycompany"
              :key="item.id"
              :label="item.company_name"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="收货公司">
          <el-select v-model="form.shdw" placeholder="请选择收货公司">
            <el-option label="请选择" value="0"></el-option>
              <el-option
                v-for="item in receivecompany"
                :key="item.id"
                :label="item.receive_company_name"
                :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
        <el-table :data="tableData" class="m-t-5">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="supply_name" label="供货公司" width="100"></el-table-column>
            <el-table-column prop="product_name" label="品名" width="100"></el-table-column>
            <el-table-column prop="name" label="采购合同">
                    
                <template #default="v">
                   <div  v-for="(item,key) in v.row.cght" :key="key">
                       <el-image :src="getUrl(item)" fit="cover" :preview-src-list="v.row.cght_url"></el-image>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="cgdj" label="采购单价（元）" ></el-table-column>
            <el-table-column prop="cgsl" label="采购数量（吨）" ></el-table-column>
            <el-table-column prop="cgjk" label="采购价款（元）" ></el-table-column>
            <!--<el-table-column prop="fksj" label="付款时间"></el-table-column>-->
            <el-table-column prop="receive_name" label="收货公司" width="100"></el-table-column>
            <el-table-column prop="name" label="销售合同">
                <template #default="v">
                <div  v-for="(item,key) in v.row.xsht" :key="key">
                       <el-image :src="getUrl(item)" fit="cover" :preview-src-list="v.row.xsht_url"></el-image>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="xsdj" label="销售单价（元）" ></el-table-column>
            <el-table-column prop="xssl" label="销售数量（吨）" ></el-table-column>
            <el-table-column prop="xsjk" label="销售价款（元）" ></el-table-column>
            <!--<el-table-column prop="sksj" label="收款时间"></el-table-column>-->
            <el-table-column prop="user_name" label="终端用户"></el-table-column>
            <el-table-column prop="zdyh" label="图片">
                <template #default="v">
                    <div  v-for="(item,key) in v.row.files" :key="key">
                       <el-image :src="getUrl(item)" fit="cover" :preview-src-list="v.row.files_url"></el-image>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="fksj" label="付款时间"></el-table-column>
            <el-table-column label="操作" min-width="200">
                <template #default="v">
                    <el-button type="success" size="mini" icon="el-icon-edit" @click="handleEdit(v.$index, v.row)">编辑
                    </el-button>
                    <el-button type="danger" size="mini" icon="el-icon-delete" @click="handleDelete(v.$index, v.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
        background
        hide-on-single-page
        layout="prev, pager, next"
        :total="total"
        :current-page="current"
        @current-change="changePage"
        >
        </el-pagination>
    </div>
</template>
<script>
    import {
        get,
        post,
    } from '@/network/request'
    import {
        __DOMAIN__
    } from '@/main.js'
    import {request_company_read, request_receive_read} from "@/network/api";
    console.log(__DOMAIN__)
    export default {
        name: 'GuideType',
        data() {
            return {
              radio:'1',
              current: 1,
              total: 0,
              supplycompany:[],
              receivecompany:[],
              searchContent3: '',
              searchContent4: '',
              tableData: [],
              form:{
                fksj:'',
                ghgs:'',
                shdw:''
              },
            }
        },
        mounted() {
            this.changePage(1)
            this.getSupplyCompany();
            this.getReceiveCompany();
        },
        methods: {
          onSubmit(){
            get('/getLog',{
              fksj:this.form.fksj,
              ghgs:this.form.ghgs,
              shdw:this.form.shdw
            }).then((res)=>{
              let result = res.data;
              if(result.code == 200){
                this.tableData = result.data.data;
                 /*this.tableData.forEach(item=>{
                  var a=[]
                  a.push('http://jxc2.dev.com:8089/'+item.cght)
                  var b=[]
                  b.push('http://jxc2.dev.com:8089/'+item.xsht)
                    item.cght_url=a
                    item.xsht_url=b
                  })*/
                this.total = result.data.total;
                this.current = result.data.current;
              }
            }).catch()
          },
          getSupplyCompany(){
            request_company_read().then((res)=>{
              let result = res.data;
              if(result.code == 200){
                this.supplycompany = result.data
              }
            }).catch()
          },
          getReceiveCompany(){
            request_receive_read().then((res)=>{
              let result = res.data;
              if(result.code == 200){
                this.receivecompany = result.data
              }
            }).catch()
          },
            getUrl(file){
                return __DOMAIN__ + file;
            },
            changePage(page) {
                // 获取分类
                get('/getLog', {
                    'page': page,
                     type:this.radio,
                    'content': this.searchContent,
                    'content2': this.searchContent2,
                    'content3': this.searchContent3,
                    'content4': this.searchContent4,
                }).then(res => {
                    const result = res.data
                    if (result.code == 200) {
                        this.tableData = result.data.data
                        this.tableData.forEach(item=>{
                          var a=[]
                          a.push('http://jxc2.dev.com:8089/'+item.cght)
                          var b=[]
                          b.push('http://jxc2.dev.com:8089/'+item.xsht)
                            item.cght_url=a
                            item.xsht_url=b
                          })
                          
                        this.total = result.data.total
                    }
                }).catch()
            },
            // 编辑
            handleEdit(index, row) {
              let arr=JSON.stringify(row)
                this.$router.push({
                  //name:'AddPartyType',
                  path:'/Work',
                  query:{arr:arr}
                })
            },
            // 删除
            handleDelete(index, row) {
                this.$confirm('此操作将永久删除，是否继续？', '系统提示', {
                    type: 'warning',
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(() => {
                    post('/delData', {
                        'id': row.id
                    }).then(res => {
                        const result = res.data
                        if (result.code == 200) {
                            this.tableData.splice(index, 1)
                            this.$message.success({
                                message: '删除成功！',
                                offset: 70
                            })
                          this.changePage(this.page)
                        } else {
                            this.$message.error({
                                message: '删除失败！',
                                offset: 70
                            })
                        }
                    }).catch()
                }).catch(() => {
                    this.$message.info({
                        message: '已取消删除！',
                        offset: 70
                    })
                })
            },
        }
    }
</script>

<style>
</style>